<script setup>
import { getAlipayFn, getH5WxPay, getPayResult, getImageGenNum } from '@/api/register'
import { preOrder, getWechatPay } from '@/api/vip.js';
import { useUserStore } from '@/store/modules/user/index.js';
import payAgreements from './payAgreements.vue'
import { ref, onMounted, computed } from 'vue'
import Toast from '@vant/weapp/dist/toast/toast';
import Introduce from './Introduce.vue'
import projectConfig from '@/config/project/index.js'

let props = defineProps({
  levelActive: {
    type: Object,
    default: {}
  }
})

const active = ref({})
const levelList = ref([])
const userInfo = computed(() => userStore.userInfo);
const checked = ref(false)
const payAgree = ref(false)
const introduceList = ref([
  {
    title: '算力永久有效',
    content: '购买到账，可以永久使用，不会过期',
  },
  {
    title: '快速生成图片',
    content: '快速产出更高效、更精准、更高清的图片',
  },
  {
    title: '无水印下载',
    content: '下载图片无水印，更方便图片使用',
  },
])



const vipChange = (item) => {
  active.value = item;
  emit('getLevelActive', item);
}
const userStore = useUserStore();
const getImageGenNumFn = async () => {
  const res = await getImageGenNum()
  console.log(res);
  active.value = res.data[res.data.length - 1]
  levelList.value = res.data

}
const onClickPayAge = () => {
  payAgree.value = true
}
const onChangeCheckbox = (e) => {
  checked.value = e.detail
}
onMounted(() => {
  getImageGenNumFn()
  userStore.getUserInfo()
})

let openId = userStore.userInfo.openId;
const orderInfo = ref({});
/**
 * @description 微信app支付
 * @param {*} param
 * @param {Object} param.userBuyInfo 用户下单的数据
 */
async function getPreOrder() {
  // return Toast.fail('该功能暂不支持')
  if (!checked.value) return Toast.fail('请先阅读并同意《支付协议》');
  if (!userInfo.value.isBindPhone && projectConfig.pay.isBindPhone) {
    return Toast({
      message: '请先绑定手机号码',
      onClose: () => {
        uni.navigateTo({ url: '/pages/auth/index' })
      }
    });

  }
  let { id, productName, price } = active.value;
  let userBuyInfo = {
    amount: price,
    productName: productName
  }

  userBuyInfo.id = id

  userBuyInfo.type = 2
  const { data } = await getWechatPay(userBuyInfo) // 拿到微信预支付下单的数据比如订单号
  console.log('调起支付拿到的data', data)
  preOrder.value = data
  const { outTradeNo } = data
  let orderSn = outTradeNo;
  let req = {
    timeStamp: '',
    nonceStr: '',
    package: data.packageVal, // 'prepay_id=' + outTradeNo,
    signType: 'MD5',
    paySign: '',
    success(res) {
      userStore.getUserInfo()
      uni.navigateTo({
        url: `/user-center/payResult/index?orderSn=${orderSn}`
      })
      console.log('支付成功', res);
    },
    fail(res) {
      console.log('支付失败', res);
    }
  }
  req = Object.assign(req, data);
  console.log('pay param', req);
  wx.requestPayment(req)

}
</script>

<template>
  <div class="vipPay" :class='levelList.length <= 3 ? "flex" : "vipPay"'>
    <div class="vipPayContentBox" v-for="item, index of levelList"
      :class="active.id === item.id ? 'active' : 'vipPayContentBox'" @click="vipChange(item)">
      <div class="remark" v-if="item.remark">{{ item.remark }}</div>
      <div class="vipPayContentBoxTitle">{{ item.productName }}</div>
      <div>
        ￥
        <span class="vipPayContentBoxMoney">{{ item.price }}</span>
      </div>
      <div class="vipPayContentBoxDel" :style="{ color: (active === index ? '#FFF' : '#B3B7BC') }">原价:{{ item.orgPrice
      }}元
      </div>
    </div>
  </div>
  <div class="Title">
    算力：
    <span class="con">
      类似手机上网消耗流量，年卡VIP可得普通用户的1.5倍算力
    </span>
  </div>
  <button class="Paybtn" @click="getPreOrder"> 立即购买<span class="actual-power">获得{{
    userInfo.level ? active.productImgNumVip : active.productImgNum }}算力</span></button>

  <div class="myRead">
    <van-checkbox :value="checked" @change="onChangeCheckbox">我已阅读并同意</van-checkbox>
    <span class="payAge" @click="onClickPayAge"> 《支付协议》</span>
  </div>
  <Introduce :introduceList="introduceList"></Introduce>
  <payAgreements :pay-agree="payAgree" @update:payAgree="payAgree = false" />
</template>



<style lang="less" scoped>
.flex {
  display: flex;
  justify-content: space-evenly;
}

.actual-power {
  padding-left: 5rpx;
  font-size: 26rpx;
  letter-spacing: 0.5px;
}

.vipPay {
  display: flex;
  overflow-x: scroll;
  padding: 20rpx 10rpx;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;

  .vipPayContentBox {
    box-sizing: border-box;
    width: 210rpx;
    height: 236rpx;
    background-color: var(--a-main-bg-color);
    border-radius: 24rpx;
    color: var(--a-one-text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 56rpx;
    margin: 5rpx 5rpx 20rpx 5rpx;
    position: relative;
    border: 6rpx solid var(--a-main-bg-color);


    .vipPayContentBoxTitle {
      font-size: 28rpx;
      text-align: center;
    }

    .vipPayContentBoxMoney {
      // font-size: 26.39rpx;
      font-size: 50.81rpx;
      font-weight: bold;
    }

    .vipPayContentBoxDel {
      font-size: 28.22rpx;
      text-decoration: line-through;
    }

    .remark {
      position: absolute;
      top: -30rpx;
      left: -7rpx;
      width: 200rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #E66255;
      border-radius: 25rpx 25rpx 25rpx 0rpx;
      font-size: 23rpx;
      color: var(--a-one-text-color);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: normal;
    }
  }

  .active {
    box-sizing: border-box;
    background: #FFF6E0;
    font-weight: bold;
    border-radius: 24rpx;
    border: 6rpx solid #FFCF86;
    color: #6B2C00 !important;
    z-index: 100;
  }
}

.Title {
  height: 59rpx;
  font-size: 38rpx;
  color: #FFCF86;
  margin: 10rpx 0 20rpx 10rpx;
  line-height: 59rpx;

}

.con {
  font-size: 30rpx;
  font-weight: 400;
  // color: #14DFE9;
  line-height: 47rpx;
}

.Paybtn {
  display: block;
  width: 626rpx;
  height: 116rpx;
  background: linear-gradient(90deg, #FFECC1 0%, #F8BC75 100%);
  border-radius: 58rpx;
  color: #6B2C00;
  font-weight: bold;
  text-align: center;
  line-height: 116rpx;
  margin-top: 70rpx;

  &::after {
    border: none;
  }
}

.myRead {
  font-size: 26rpx;
  text-align: center;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.payAge {
  color: #FFCF86;
  transform: translate(0, 2rpx);
}
</style>